<template>
  <div>
    <el-form
      ref="dataList"
      :model="forms"
      label-width="120px"
      label-position="top"
    >
      <el-row>
        <el-col>
          <el-table :data="forms.areaList" border class="borderTable">
            <el-table-column
              label="序号"
              align="center"
              type="index"
              width="55"
            />
            <el-table-column label="省" align="center" prop="province">
              <template #default="scope">
                <span>{{ scope.row.province }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="预评估任务名称"
              align="center"
              prop="ypgTaskNames"
            >
              <template #default="scope">
                <span>{{ scope.row.ypgTaskNames }}</span>
              </template>
            </el-table-column>
            <el-table-column label="系统得分" align="center" prop="systemScore">
              <template #default="scope">
                {{ scope.row.systemScore }}
              </template>
            </el-table-column>
            <el-table-column label="得分详情" align="center" prop="">
              <template #default="scope">
                <el-button plain @click="handleView(scope.row)">查看</el-button>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" prop="">
              <template #default="scope">
                <!-- <el-button plain v-if="scope.row.flag" @click="handleAreaproportion(scope.row)">面积占比</el-button> -->
                <!-- <el-button plain v-if="scope.row.ypgTaskNames.split('、').length>1" @click="handleAreaproportion(scope.row)">面积占比</el-button> -->
                <el-button plain @click="handleRecalculate(scope.row)">重新计算</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog
      title="系统评分"
      v-model="SystemOpen"
      width="800px"
      append-to-body
    >
      <div class="systemBox"></div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="sureClose">确定</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 面积占比 -->
    <el-dialog title="面积占比" v-model="open" width="800px" append-to-body>
      <areaOperation  :areaOperationList="areaOperationList"/>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="open = false">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {
  getAreaRadioByProvinceId,
  getGlTaskScoreDetails,
  areaSystemScoreOps,
  getAreaSystemScoreOpsing,
} from "@/api/workEvaluation/appraisalTaskManagement/appraisalTaskManage.js";
import { onMounted } from "vue";
import areaOperation from './areaOperation'
import { dataMethod } from "@/utils/spanTable.js";
import { useRouter } from "vue-router";
const emit = defineEmits();
const SystemOpen = ref(false); //系统评分模态框
const open = ref(false); //面积占比模态框
const { proxy } = getCurrentInstance();
const router = useRouter();
const spanObj = ref();
const areaOperationList = ref([]);
const props = defineProps({
  forms: {
    default: {},
    type: Object,
  },
  krtId: {
    default: "",
    type: String,
  },
});
const { forms, krtId } = toRefs(props);
watch(
  () =>[ areaOperationList.value,krtId],
  () => {
    spanObj.value = dataMethod(areaOperationList.value, ["provinceName"]);
  }
);
const handleView = (val) => {
  // let obj = {};
  // getGlTaskScoreDetails({
  //   provinceId: val.provinceId,
  //   krtId: krtId.value,
  // }).then((res) => {
  //   obj = res.data;
  //   router.push({
  //     path: "/workEvaluation/appraisalTaskManagement/detailIndex",
  //     state:{
  //       active:1,
  //       data:JSON.stringify(obj)
  //     }
  //   });
  // });
  router.push({
      path: "/workEvaluation/appraisalTaskManagement/detailIndex",
      query:{
        active:1,
        provinceId: val.provinceId,
       krtId: krtId.value,
      }
    });
};
// 面积占比表格合并
function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  //判断合并列
  // console.log(column)
  const _row = spanObj.value[column.property]
    ? spanObj.value[column.property][rowIndex]
    : 1;
  const _col = _row > 0 ? 1 : 0;
  return {
    rowspan: _row,
    colspan: _col,
  };
}
// 重新计算
const handleRecalculate = (val) => {
  areaSystemScoreOps({ krtId: krtId.value, provinceId: val.provinceId }).then(
    (res) => {
      if (res.code == 200) {
        startSystemScore(val);
      }
    }
  );
  SystemOpen.value = true;
};
// 系统评分开始计算
const startSystemScore = (val) => {
  let box = document.getElementsByClassName("systemBox")[0];
  box.innerHTML = '';
  let startTime = setInterval(() => {
    let str = "";
    getAreaSystemScoreOpsing({
      krtId: krtId.value,
      provinceId: val.provinceId,
    }).then((res) => {
      nextTick(() => {
        res.data.forEach((v, i) => {
          str += `<p>` + v + `</p>`;
        });
        box.innerHTML = str;
        if (res.data.includes("计算完成")) {
          clearInterval(startTime);
        }
      });
    });
  }, 500);
};
const sureClose=()=>{
  SystemOpen.value=false
  emit("refreshList",null);
}
// 面积占比
const handleAreaproportion = (val) => {
  getAreaRadioByProvinceId({ provinceId: val.provinceId,
    krtId: krtId.value}).then((res) => {
    areaOperationList.value = res.data;
  });
  open.value = true;
};
onMounted(() => {
  spanObj.value = dataMethod(areaOperationList.value, ["provinceName"]);
});
</script>
<style lang="scss" scoped>
.borderTables {
  margin: 20px 0;
  box-sizing: border-box;
}
.systemBox {
  width: 100%;
  text-align: center;
  p {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
  }
}
</style>
